<script setup>
import { ref } from 'vue';

const selectedRadioValue = ref('red');
const verticalRadioValue = ref('medium');
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Radio and RadioGroup Components</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Radio Buttons</h3>
        <div class="flex flex-col space-y-4">
          <div class="flex items-center gap-2">
            <Radio name="basic-example" value="option1" checked />
            <span>Option 1 (Default checked)</span>
          </div>

          <div class="flex items-center gap-2">
            <Radio name="basic-example" value="option2" />
            <span>Option 2</span>
          </div>

          <div class="flex items-center gap-2">
            <Radio name="basic-example" value="option3" />
            <span>Option 3</span>
          </div>

          <div class="flex items-center gap-2">
            <Radio name="basic-example" value="option4" disabled />
            <span>Option 4 (Disabled)</span>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Radio Group (Horizontal)</h3>
        <div class="flex flex-col space-y-4">
          <RadioGroup orientation="horizontal" v-model="selectedRadioValue">
            <div class="flex space-x-4">
              <div class="flex items-center gap-2">
                <Radio value="red" />
                <span>Red</span>
              </div>
              <div class="flex items-center gap-2">
                <Radio value="green" />
                <span>Green</span>
              </div>
              <div class="flex items-center gap-2">
                <Radio value="blue" />
                <span>Blue</span>
              </div>
            </div>
          </RadioGroup>
          <div>Selected value: {{ selectedRadioValue }}</div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Radio Group (Vertical)</h3>
        <RadioGroup
          name="vertical-group"
          orientation="vertical"
          v-model="verticalRadioValue"
        >
          <div class="flex flex-col space-y-2">
            <div class="flex items-center gap-2">
              <Radio value="small" />
              <span>Small</span>
            </div>
            <div class="flex items-center gap-2">
              <Radio value="medium" />
              <span>Medium</span>
            </div>
            <div class="flex items-center gap-2">
              <Radio value="large" />
              <span>Large</span>
            </div>
          </div>
        </RadioGroup>
        <div class="mt-2">Selected value: {{ verticalRadioValue }}</div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Disabled Radio Group</h3>
        <RadioGroup name="disabled-group" disabled>
          <div class="flex flex-col space-y-2">
            <div class="flex items-center gap-2">
              <Radio value="option1" checked />
              <span>Option 1 (Selected but Disabled)</span>
            </div>
            <div class="flex items-center gap-2">
              <Radio value="option2" />
              <span>Option 2 (Disabled)</span>
            </div>
            <div class="flex items-center gap-2">
              <Radio value="option3" />
              <span>Option 3 (Disabled)</span>
            </div>
          </div>
        </RadioGroup>
      </div>
    </div>
  </div>
</template>
